/**
* provided by easytouch
* @author youxiao
*/
//slide
.ks-navigation-view-anim-slide(@durationIn: .25s, @functionIn: ease-in-out, @durationOut: .25s, @functionOut: ease-in-out) {
  .ks-navigation-view-anim-slide-left-enter{
    -webkit-animation: ks-navigation-view-anim-slide-left-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-slide-right-leave{
    -webkit-animation: ks-navigation-view-anim-slide-right-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-slide-left-enter {
    0% {
      -webkit-transform: translateX(-100%);
    }
    100% {
      -webkit-transform: translateX(0);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-slide-right-leave {
    0% {
      -webkit-transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(100%);
    }
  }

  .ks-navigation-view-anim-slide-right-enter{
    -webkit-animation: ks-navigation-view-anim-slide-right-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-slide-left-leave{
    -webkit-animation: ks-navigation-view-anim-slide-left-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-slide-right-enter {
    0% {
      -webkit-transform: translateX(100%);
    }
    100% {
      -webkit-transform: translateX(0);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-slide-left-leave {
    0% {
      -webkit-transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-100%);
    }
  }
}

//slider slide-vertical
.ks-navigation-view-anim-slide-vertical(@durationIn: .25s, @functionIn: ease-in-out, @durationOut: .25s, @functionOut: ease-in-out){
  .ks-navigation-view-anim-slide-top-enter{
    -webkit-animation: ks-navigation-view-anim-slide-top-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-slide-bottom-leave {
    -webkit-animation: ks-navigation-view-anim-slide-bottom-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-slide-top-enter {
    0% {
      -webkit-transform: translateY(-100%);
    }
    100% {
      -webkit-transform: translateY(0);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-slide-bottom-leave {
    0% {
      -webkit-transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(100%);
    }
  }

  .ks-navigation-view-anim-slide-bottom-enter {
    -webkit-animation: ks-navigation-view-anim-slide-bottom-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-slide-top-leave{
    -webkit-animation: ks-navigation-view-anim-slide-top-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-slide-bottom-enter {
    0% {
      -webkit-transform: translateY(100%);
    }
    100% {
      -webkit-transform: translateY(0);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-slide-top-leave {
    0% {
      -webkit-transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(-100%);
    }
  }
}

//fade
.ks-navigation-view-anim-fade(@durationIn: .225s, @functionIn: ease-out, @durationOut: .125s, @functionOut: ease-in){
  .ks-navigation-view-anim-fade-enter {
    -webkit-animation: ks-navigation-view-anim-fade-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-fade-leave {
    -webkit-animation: ks-navigation-view-anim-fade-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-fade-enter {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-fade-leave {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

//Disolve
.ks-navigation-view-anim-dissolve(@durationIn: .125s, @functionIn: ease-out, @durationOut: .225s, @functionOut: ease-in){
  .ks-navigation-view-anim-dissolve-enter {
    -webkit-animation: ks-navigation-view-anim-dissolve-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-dissolve-leave {
    z-index: 2;
    -webkit-animation: ks-navigation-view-anim-dissolve-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-dissolve-enter {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-dissolve-leave {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

//pop
.ks-navigation-view-anim-pop(@durationIn: .35s, @functionIn: ease-out, @durationOut: .1s, @functionOut: ease-in){
  .ks-navigation-view-anim-pop-enter {
    -webkit-animation: ks-navigation-view-anim-pop-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-pop-leave {
    -webkit-animation: ks-navigation-view-anim-pop-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-pop-enter {
    0% {
      -webkit-transform: scale(.2);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-pop-leave {
    0% {
      -webkit-transform: scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(.2);
      opacity: 0;
    }
  }
}

//swap
.ks-navigation-view-anim-swap(@durationIn: .6s, @functionIn: ease-out, @durationOut: .6s, @functionOut: ease-in){
  .ks-navigation-view-anim-swap-right-leave,
  .ks-navigation-view-anim-swap-left-enter{
    -webkit-transform: perspective(800);
  }
  .ks-navigation-view-anim-swap-left-enter {
    -webkit-transform-origin: 0% 100%;
    -webkit-animation: ks-navigation-view-anim-swap-left-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-swap-right-leave {
    -webkit-transform-origin: 100% 100%;
    -webkit-animation: ks-navigation-view-anim-swap-right-leave @durationIn @functionIn;
  }
  @-webkit-keyframes ks-navigation-view-anim-swap-left-enter {
    0% {
      -webkit-transform: translate3d(0, 0, -800px) rotateY(70deg);
      opacity: 0;
    }
    35% {
      -webkit-transform: translate3d(-25%, 0, -400px) rotateY(20deg);
      opacity: 1;
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0) rotateY(0);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-swap-right-leave {
    0% {
      -webkit-transform: translate3d(0, 0, 0) rotateY(0);
      opacity: 1;
    }
    35% {
      -webkit-transform:  translate3d(25%, 0, -400px) rotateY(-20deg);
      opacity: .5;
    }
    100% {
      -webkit-transform: translate3d(0, 0, -800px) rotateY(-70deg);
      opacity: 0;
    }
  }

  .ks-navigation-view-anim-swap-right-enter,
  .ks-navigation-view-anim-swap-left-leave{
    -webkit-transform: perspective(800);
  }
  .ks-navigation-view-anim-swap-left-leave {
    -webkit-transform-origin: 0% 100%;
    -webkit-animation: ks-navigation-view-anim-swap-left-leave @durationIn @functionIn;
  }
  .ks-navigation-view-anim-swap-right-enter {
    -webkit-transform-origin: 100% 100%;
    -webkit-animation: ks-navigation-view-anim-swap-right-enter @durationIn @functionIn;
  }
  @-webkit-keyframes ks-navigation-view-anim-swap-left-leave {
    0% {
      -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
      opacity: 1;
    }
    35% {
      -webkit-transform: translate3d(-25%, 0, -400px) rotateY(20deg);
      opacity: .5;
    }
    100% {
      -webkit-transform:  translate3d(0, 0, -800px) rotateY(70deg);
      opacity: 0;
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-swap-right-enter {
    0% {
      -webkit-transform: translate3d(0, 0, -800px) rotateY(-70deg);
      opacity: 0;
    }
    35% {
      -webkit-transform: translate3d(25%, 0, -400px) rotateY(-20deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);
      opacity: 1;
    }
  }
}

//flip
.ks-navigation-view-anim-flip(@durationIn: .225s, @functionIn: ease-out, @durationOut: .175s, @functionOut: ease-in){
  .ks-navigation-view-anim-flip-left-enter,
  .ks-navigation-view-anim-flip-right-leave{
    -webkit-transform-origin: 50% 50%;
    -webkit-backface-visibility: hidden;
  }
  .ks-navigation-view-anim-flip-left-enter{
    opacity: 0;
    -webkit-animation: ks-navigation-view-anim-flip-left-enter @durationIn @functionIn;
    -webkit-animation-delay: @durationOut*.9;
  }
  .ks-navigation-view-anim-flip-right-leave {
    -webkit-animation: ks-navigation-view-anim-flip-right-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-flip-left-enter {
    0% {
      opacity: 1;
      -webkit-transform: rotateY(-90deg) scale(.9);
    }
    100% {
      opacity: 1;
      -webkit-transform: rotateY(0) scale(1);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-flip-right-leave {
    0% {
      -webkit-transform: rotateY(0) scale(1);
    }
    100% {
      -webkit-transform: rotateY(90deg) scale(.9);
    }
  }

  .ks-navigation-view-anim-flip-left-leave,
  .ks-navigation-view-anim-flip-right-enter{
    -webkit-transform-origin: 50% 50%;
    -webkit-backface-visibility: hidden;
  }
  .ks-navigation-view-anim-flip-right-enter {
    opacity: 0;
    -webkit-animation: ks-navigation-view-anim-flip-right-enter @durationIn @functionIn;
    -webkit-animation-delay: @durationOut*.9;
  }
  .ks-navigation-view-anim-flip-left-leave {
    -webkit-animation: ks-navigation-view-anim-flip-left-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-flip-right-enter {
    0% {
      opacity: 1;
      -webkit-transform: rotateY(90deg) scale(.9);
    }
    100% {
      opacity: 1;
      -webkit-transform: rotateY(0) scale(1);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-flip-left-leave {
    0% {
      -webkit-transform: rotateY(0) scale(1);
    }
    100% {
      -webkit-transform: rotateY(-90deg) scale(.9);
    }
  }
}

//cube
.ks-navigation-view-anim-cube(@durationIn: .6s, @functionIn: ease, @durationOut: .6s, @functionOut: ease){
  .ks-navigation-view-anim-cube-left-enter,
  .ks-navigation-view-anim-cube-right-leave{
    -webkit-transform: perspective(800);
  }
  .ks-navigation-view-anim-cube-left-enter {
    -webkit-animation: ks-navigation-view-anim-cube-left-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-cube-right-leave {
    -webkit-animation: ks-navigation-view-anim-cube-right-leave @durationIn @functionIn;
  }
  @-webkit-keyframes ks-navigation-view-anim-cube-left-enter {
    0% {
      -webkit-transform: rotateY(-90deg) translateX(-100%) translateZ(240px);
      opacity: .5;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-cube-right-leave{
    0% {
      opacity: 1;
    }
    100% {
      -webkit-transform: rotateY(90deg) translateX(100%) translateZ(240px);
      opacity: .5;
    }
  }

  .ks-navigation-view-anim-cube-left-leave,
  .ks-navigation-view-anim-cube-right-enter{
    -webkit-transform: perspective(800);
  }
  .ks-navigation-view-anim-cube-right-enter {
    -webkit-animation: ks-navigation-view-anim-cube-right-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-cube-left-leave {
    -webkit-animation: ks-navigation-view-anim-cube-left-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-cube-right-enter {
    0% {
      -webkit-transform: rotateY(90deg) translateX(100%) translateZ(240px);
      opacity: .5;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-cube-left-leave {
    0% {
      opacity: 1;
    }
    100% {
      -webkit-transform: rotateY(-90deg) translateX(-100%) translateZ(240px);
      opacity: .5;
    }
  }
}

//flow
.ks-navigation-view-anim-flow(@durationIn: .35s, @functionIn: ease, @durationOut: .35s, @functionOut: ease){
  .ks-navigation-view-anim-flow-left-enter,
  .ks-navigation-view-anim-flow-right-leave{
    -webkit-transform-origin: 50% 30%;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
  }
  .ks-navigation-view-anim-flow-left-enter {
    -webkit-animation: ks-navigation-view-anim-flow-left-enter @durationIn @functionIn;
    -webkit-animation-delay: @durationOut;
    -webkit-transform: translateX(-100%) scale(.7);
  }
  .ks-navigation-view-anim-flow-right-leave {
    -webkit-animation: ks-navigation-view-anim-flow-right-leave @durationOut @functionOut;
    -webkit-transform: translateX(100%) scale(.7);
  }
  @-webkit-keyframes ks-navigation-view-anim-flow-left-enter {
    0% {
      -webkit-transform: translateX(-100%) scale(.7);
    }
    30%,
    40% {
      -webkit-transform: translateX(0) scale(.7);
    }
    100% {
      -webkit-transform: translateX(0) scale(1);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-flow-right-leave{
    0% {
      -webkit-transform: translateX(0) scale(1);
    }
    60%,
    70% {
      -webkit-transform: translateX(0) scale(.7);
    }
    100% {
      -webkit-transform: translateX(100%) scale(.7);
    }
  }

  .ks-navigation-view-anim-flow-left-leave,
  .ks-navigation-view-anim-flow-right-enter{
    -webkit-transform-origin: 50% 30%;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
  }
  .ks-navigation-view-anim-flow-right-enter {
    -webkit-animation: ks-navigation-view-anim-flow-right-enter @durationIn @functionIn;
    -webkit-animation-delay: @durationOut;
    -webkit-transform: translateX(100%) scale(.7);
  }
  .ks-navigation-view-anim-flow-left-leave {
    -webkit-animation: ks-navigation-view-anim-flow-left-leave @durationOut @functionOut;
    -webkit-transform: translateX(-100%) scale(.7);
  }
  @-webkit-keyframes ks-navigation-view-anim-flow-right-enter {
    0% {
      -webkit-transform: translateX(100%) scale(.7);
    }
    30%,
    40% {
      -webkit-transform: translateX(0) scale(.7);
    }
    100% {
      -webkit-transform: translateX(0) scale(1);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-flow-left-leave {
    0% {
      -webkit-transform: translateX(0) scale(1);
    }
    60%,
    70% {
      -webkit-transform: translateX(0) scale(.7);
    }
    100% {
      -webkit-transform: translateX(-100%) scale(1);
    }
  }
}

//turn
.ks-navigation-view-anim-turn(@durationIn: .35s, @functionIn: ease-out, @durationOut: .1s, @functionOut: ease-in){
  .ks-navigation-view-anim-turn-enter,
  .ks-navigation-view-anim-turn-leave{
    -webkit-backface-visibility:hidden;
    -webkit-transform-origin: 0;
  }
  .ks-navigation-view-anim-turn-enter {
    -webkit-animation: ks-navigation-view-anim-turn-enter @durationIn @functionIn;
  }
  .ks-navigation-view-anim-turn-leave {
    z-index: 1;
    -webkit-animation: ks-navigation-view-anim-turn-leave @durationOut @functionOut;
  }
  @-webkit-keyframes ks-navigation-view-anim-turn-enter {
    0% {
      -webkit-transform: rotateY(90deg) scale(.9);
    }
    100% {
      -webkit-transform: rotateY(0);
    }
  }
  @-webkit-keyframes ks-navigation-view-anim-turn-leave{
    0% {
      -webkit-transform: rotateY(0);
    }
    100% {
      -webkit-transform: rotateY(-90deg) scale(.9);
    }
  }
}



.ks-navigation-view-anim-slide();
.ks-navigation-view-anim-slide-vertical();
.ks-navigation-view-anim-fade();
.ks-navigation-view-anim-dissolve();
.ks-navigation-view-anim-pop();
.ks-navigation-view-anim-flip();
.ks-navigation-view-anim-swap();
.ks-navigation-view-anim-cube();
.ks-navigation-view-anim-flow();
.ks-navigation-view-anim-turn();
